<template>
  <div class="updata-name">
        <van-nav-bar
          title="修改昵称"
          left-text="取消"
          right-text="完成"
          class="nav-bar"
          @click-left="$emit('close')"
          @click-right="onConfirm"
        />
        <div class="field">
            <van-field
                v-model.trim="localName"
                rows="2"
                autosize
                type="textarea"
                maxlength="7"
                placeholder="请输入昵称"
                show-word-limit
            />
        </div>
  </div>
</template>

<script>
import {UserProfile} from '@/api/user.js'
export default {
  name: 'UpdataName',
  components: {  },
  props:{
    //声明接收父组件v-model传递的value
    value:{
      type:String,
       required:true
    }
  },
  directives: {  },
  data() {
    return {
        localName:this.value
    };
  },

  mounted() {

  },

  methods: {
async onConfirm(){
      this.$toast.loading({
        message:'保存中',
        forbidClick:true
      })
      try {
        await UserProfile({
            name:this.localName
        })
         this.$toast.success('保存成功')
         this.$emit('input',this.localName)
          //关闭弹窗
          this.$emit('close');
      } catch (error) {
           if(error && error.response && error.response===409){
              this.$toast.fail('昵称已存在')
           }
      }
    }
  },
};
</script>

<style lang="less" scoped>
.field{
  padding:10px;
}
</style>
